<template>
  <div class="userPermiss">
    <a-card :bordered="false" title="用户列表">
      <!-- <div slot="extra">
        <a-input-search style="margin-left: 16px; width: 272px;" @search="onSearch" />
      </div> -->
      <div class="operate">
        <a-button type="dashed" style="width: 100%;margin-bottom:10px" icon="plus" @click="doAdd">添加</a-button>
      </div>
      <a-table
        :pagination="pagination"
        :rowKey="loadData=>loadData.id"
        :columns="columns"
        :dataSource="loadData"
        :loading="loading"
        @change="handleTableChange">

        <span slot="role_id" slot-scope="row">
          <p>{{ row.role_id }}</p>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="doedit(record)">修改身份</a-button>
          <a-popconfirm title="确定删除吗?" ok-text="确定" cancel-text="取消" @confirm="dodel(record)">
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </span>
      </a-table>

      <!-- <role-modal ref="modal" @ok="handleOk"></role-modal> -->
      <!-- 新增弹窗 -->
      <a-modal
        :title="isadd===true?'新增用户':'修改用户角色'"
        :visible="visible"
        @ok="handleOk2"
        :width="600"
        :height="300"
        :centered="true"
        @cancel="handleCancel2">
        <a-card title class="card" :bordered="false">
          <div style="margin-bottom: 16px">
            <a-row :gutter="24">
              <a-col :lg="24" :md="24" :sm="24" v-if="isadd===true">
                <div class="dispaly">
                  <span>账号:</span>
                  <a-input placeholder="请输入手机号!" v-model="form.phone" />
                </div>
              </a-col>
              <a-col :lg="24" :md="24" :sm="24" v-if="isadd===true">
                <div class="dispaly">
                  <span>密码:</span>
                  <a-input placeholder="请输入密码!" v-model="form.password" />
                </div>
              </a-col>
              <a-col :lg="24" :md="24" :sm="24">
                <div class="dispaly">
                  <span>角色:</span>
                  <a-select
                    mode="multiple"
                    style="width: 100%"
                    :value="chooseroles"
                    @change="handleChange"
                    placeholder="请选择角色!"
                    allowClear>
                    <a-select-option v-for="(item, index) in rolesList" :key="index" :value="item.id">
                      {{ item.role_name }}</a-select-option>
                  </a-select>
                </div>
              </a-col>

            </a-row>
          </div>
        </a-card>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
  import {
    getUserRole,
    doAddUser,
    getRoleList,
    doDelUser,
    doUpdateUser
  } from '@/api/permission'

  export default {
    name: 'UserPermiss',
    data () {
      return {
        isadd: true,
        description: '',
        pagination: {
          pageSize: 15,
          page: 1
        },
        visible: false,
        loading: false,
        form: {
          phone: '',
          password: '',
          role_id: ''
        },
        mdl: {},
        // 表头
        columns: [{
            title: '手机号',
            dataIndex: 'phone'
          },
          {
            title: '用户身份',
            dataIndex: 'role_name'
          },
          {
            title: '操作',
            width: '150px',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        loadData: [],
        rolesList: [],
        chooseroles: [],
        roleList: [],
        id: ''
      }
    },
    created () {
      this.getUserRole(15, 1)
    },
    methods: {
      doedit (row) {
        this.id = row.id
        this.isadd = false
        this.visible = true
        console.log(row)
        this.chooseroles = row.role_id.split(',')
        this.chooseroles = this.chooseroles.map(Number)
        // console.log(this.chooseroles)
      },
      // 修改
      doUpdateUser (id, roleid) {
        doUpdateUser({
            id: id,
            role_id: roleid
          })
          .then(res => {
            if (res.code === 200) {
              console.log('修改返回', res)
              this.$message.success('修改成功!')
              this.getUserRole(15, 1)
              this.handleCancel2()
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      doAdd () {
        this.isadd = true
        this.visible = true
      },
      handleTableChange (pagination, filters, sorter) {
        console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.getUserRole(this.pagination.pageSize, this.pagination.current)
        // this.getUserList()
      },
      // onSearch (value) {
      //   this.userName = value
      //   this.getUserRole(15, 1, value)
      // },
      handleChange (value) {
        console.log(`selected ${value}`)
        this.chooseroles = value
        console.log(this.chooseroles)
      },
      handleOk2 (e) {
        if (this.isadd === true) {
          if (this.form.phone !== '' && this.form.password !== '' && this.chooseroles !== []) {
            this.handleCancel2()
            this.form.role_id = this.chooseroles.toString()
            this.doAddUser(this.form)
          } else {
            this.$message.info('请检查输入框!')
          }
        } else {
          console.log(this.chooseroles)
          const idstr = this.chooseroles.toString()
          this.doUpdateUser(this.id, idstr)
        }
      },
      handleCancel2 (e) {
        this.form = {}
        this.chooseroles = []
        this.visible = false
      },
      eval (fn) {
        // 数组字符串转数组
        var Fn = Function // 一个变量指向Function，防止有些前端编译工具报错
        return new Fn('return ' + fn)()
      },
      dodel (record) {
        console.log(record)
        doDelUser({
          user_id: record.id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getUserRole(15, 1)
          } else {
            this.$message.info(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getRoleList () {
        getRoleList().then((res) => {
          console.log('角色列表', res.data)
          this.rolesList = res.data.data
          console.log('this.loadData', this.loadData)
        }).catch(err => {
          console.log(err)
        })
      },
      doAddUser (value) {
        doAddUser(value).then(res => {
          console.log(res)
          this.$message.success('新增成功!')
          this.getUserRole(15, 1)
        }).catch(err => {
          console.log(err)
        })
      },
      getUserRole (pageSize, page) {
        this.loading = true
        getUserRole({
          pageSize: pageSize,
          page: page
        }).then(res => {
          this.getRoleList()
          console.log('用户列表', res)
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.count
          this.pagination = pagination
          this.loadData = res.data.data
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .dispaly {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 10px;

    span {
      width: 100px;
      text-align: right;
      margin-right: 10px
    }
  }
</style>
